//----------------
//页面加载

$(function(){
    createSliderImg();// 轮播图
    zwhomecategory(); //城市类目
    getFreeWalk();//机酒自由行
    getThemeWalk();//主题推荐
    //---------------footer   公共页脚-------------------------
    $(".footer_div").load("../zworld-footer.html");
    showSelect();//city select

});
    function showSelect(){

   $(".login_text").focus(function(){
       $(".city_search_ul").show(300);

   }).blur(function(){
       $(".city_search_ul").hide(200);
   });
        $(".city_search_li").mouseenter(function(){
            $(this).css("background","#32CD89");
        }).mouseleave(function(){
            $(this).css({"background":""});
        })

    }


//-----------------------Banner-----sliderimg-------------
function createSliderImg(){
    $.get("index/banner.json",function(res){ //获取后台 图片数据
        //console.log(res[0].imgUrl);
        //console.log(res);
        var i=0;
        i=i%4;
    for(var j=0;j<4;j++){  //创建img接受图片数据  再 追加到父元素div
        $("<img class='swiper-slide'/>").attr("src",res[i].imgUrl).appendTo($(".swiper-wrapper"));
        i++;
    };
        //图片轮播封装函数
        silderImg('.swiper-container',".swiper-wrapper",'.swiper-button-prev','.swiper-button-next','.swiper-pagination');
    });
}
//---------//图片轮播封装函数-----------------------------------------

function silderImg(parentClass,childClass,prevBtn,nextBtn,page){
    var mySwiper = new Swiper(parentClass, {
        autoplay: 2000,//可选选项，自动滑动
        //    -------点击按钮前进后退--------------
        prevButton:prevBtn,
        nextButton:nextBtn,
        pagination :page,
        paginationClickable: true
    });
}
//----------------------banner----创建-城市类目--侧边栏-li------------------------------
function zwhomecategory(){
    $.get("index/menu.json",function(res){
        //console.log(res);
        createCityLi(res);
    })

            function createCityLi(data){
                var imgArr = ['../images/1.png','../images/2.png','../images/3.png','../images/4.png','../images/5.png','../images/6.png','../images/7.png']
              var  cityUl = $("#zwCategoryList").empty();
                //categoryUl = $(".zw-home-category-ul").empty();
                var i=0;
                    i=i%6;
                $.each(data,function(m,n){
                    //console.log(m);//下标
                    //console.log(n);//下标.对应的数据
                 var   cityLi= $("<li class='zw-home-category-item'/>");
                    cityLi.appendTo($("#zwCategoryList"));
                    cityLi.append($("<img class='zw-home-category-img' width='16px' height='16px'/>").attr("src",imgArr[i]));
                    cityLi.append($("<h2 class='zw-home-category-h2'/>").html(n.title));
                    cityLi.append($("<p class='zw-home-category-p1'/>")
                        .append($("<a href=''/>").html(n.mainCity[0]))
                        .append($("<a href=''/>").html(n.mainCity[1]))
                        .append($("<a href=''/>").html(n.mainCity[2]))
                        .append($("<a href=''/>").html(n.mainCity[3]))
                        .append($("<a href=''/>").html(n.mainCity[4])));
                    cityLi.append($("<p class='zw-home-category-right'/>").html("&gt;"));
                    i++;
            showCategory(data,cityLi); //调用 城市类目焦点函数
        });
    }
}
//------------------类目焦点---每个li 对应的数据----------------
function showCategory(data,cityLi){
    $.each(cityLi,function(){
        var idx=$(this).index(); //获取索引
       var categoryUl = $(".zw-home-category-ul").empty();
        $(this).mouseenter(function(){ //添加鼠标滑过事件
              $(".zw-home-category-item").css("background", "rgba(0,0,0,0.1)");
             //获取鼠标滑过对应的li 里的信息数据
            if(idx!=5){
                $(this).css({'background':'#fff','color': "#000"});
                $(".zw-home-category-ul").css("display","block");
                $(".zw-home-category-theme").css("display","none");
                createCategory(data,idx);

            }else{
                $(this).css({'background':'#fff','color': "#000"});
                $(".zw-home-category-ul").css("display","none");
                $(".zw-home-category-theme").css("display","block");
                getTheme(data,idx);

            }
        });
        });

          $("#zwCategory").mouseleave(function(){
              //鼠标ul离开事件
              $(".zw-home-category-item").css("background", "rgba(0,0,0,0.1)");
              $(".zw-home-category-ul").css("display","none");
            $(".zw-home-category-theme").css("display","none");

            })
};
//-------banner--------获取焦点  主题推荐-圆圈九个-------------------

function getTheme(data,idx){
   var themeDiv = $(".zw-home-category-theme");
    themeDiv.empty();
    var theme_h2= $("<h2 class='zw-home-category-theme-h2'/>").html(data[idx]['moreCity'][0]["cityName"]);
    theme_h2.appendTo(themeDiv);
  var  themeUl = $("<ul class='zw-home-category-theme-ul'/>");
    themeUl.appendTo(themeDiv);
    console.log(data[idx]['moreCity'][0]["cityName"]);
    //console.log(data[idx]['moreCity'][0].items); //获取图片数组
   var  themeLi =  $("<li class='zw-home-category-theme-li'/>");
    themeLi.appendTo(themeUl);
    $(data[idx]['moreCity'][0].items).each(function(m,n){
        themeLi.append($("<img class=' themeimg'/>").attr("src",data[idx]['moreCity'][0].items[m]));
        //console.log(data[idx]['moreCity'][0].items[m])
    })

}

//---------banner---------获取焦点 类目数据---------------------

function createCategory(data,idx){
    var categoryUl = $(".zw-home-category-ul")
    categoryUl.empty();
        //console.log(data[idx]['moreCity'][0]["cityName"]);
    $(data[idx]['moreCity']).each(function(m,n){
     var   categoryLi=$("<li class='zw-home-category-li'/>");
        categoryLi.appendTo(categoryUl);
        categoryLi.append($("<h2 class='categoryLi-h2'/>").html(data[idx]['moreCity'][m].cityName))
            .append($("<p class='categoryLi-p2'/>"));
    //console.log(n.items);
    $(n.items).each(function(m,n){
     var categoryA= $("<a class='categoryLi-a'/>").html(n);
        categoryA.appendTo($(".categoryLi-p2:last"));
    });
    });
    $("<img class='categoryLi-img' width='290px' />").attr("src",data[idx]['moreCityImg']).appendTo($(".zw-home-category-ul"));
};

//--------------机酒自由行请求数据---------------------------------
function getFreeWalk(){
    $.get("index/freeWalk.json",function(res){
        //console.log(res);
        createFreeLi(res);//
        createFreeWalk(res,0)
    })
}

//-----------  获取机酒自由行的数据 title  -----------------------
var freeWalk_title_ul = $(".zw-home-freeWalk-ul");
function createFreeLi(data){
    $.each(data,function(m,n){
        freeWalk_title_ul.empty();
        //console.log(n["title"]);
    var theme_title_li =$("<li class='zw-home-freeWalk-li'/>");
    theme_title_li.appendTo($(".zw-home-freeWalk-ul"));
    theme_title_li.append($("<a href='' class='title-a'/>").html(n["title"]));
    var title_li_a= theme_title_li.find("a");
    //    -----------------调用鼠标滑过事件函数
    //    console.log(title_li_a);
         eventTitleLi(data,theme_title_li);
    });
}
//------------添加鼠标滑过事件----------------------
function eventTitleLi(data,title_li){
    $.each(title_li,function(){
        $(this).mouseenter(function(){
            //console.log(title_li_a)
                var index = $(this).index();
                 //console.log(index);//0
                createFreeWalk(data,index);
            })
    })
}

//console.log(freeUl);
//------------------创建元素   接受数据-list  content-----------
function createFreeWalk(data,idx){''
    var freeUl = $(".zw-home-freeWalk-wrap-ul");
    var data= data[idx]["data"];
        freeUl.empty();
    $.each(data,function(m,n){
        var freeLi = $("<li class='zw-home-freeWalk-wrap-li'/>");
        freeLi.appendTo(freeUl);
        freeLi.append($("<img class='zw-home-freeWalk-wrap-img' />").attr("src", n["imgUrl"]));
        freeLi.append($("<div class='wrap_div'/>")
            .append($("<p class='wrap-ticket-p'/>").html("机票")
            .append($("<p class='wrap-money-p'/>").append($("<em class='p-em'/>").html(n["price"])).append($('<span/>').html("元起")))
            .append($("<h3 class='wrap-title-h3'/>").html(n["title"]))
            ));
            $(".zw-home-freeWalk-wrap-li:first").find('div').append($("<p class='warp-time-p'/>").html(n["time"]).css("color","#fff"));
    });
    $(".zw-home-freeWalk-wrap-li:first").css({"width":"570px", "overflow": "hidden"});
    $(".zw-home-freeWalk-wrap-li:first").find("div").css({"width":"570px",color:"#fff", background:"rgba(0, 0, 0, 0.8)" });
    $(".zw-home-freeWalk-wrap-li:first").find("h3").css({"width":"570px","color":"#fff"});

    $('<li/>').addClass("freewalk-more ").css("background-image","linear-gradient(#61d482,#15cbb3)").append(
        $('<a href=""/>').append(
            $('<p class="more-title"/>').html('查看更多'+'<br/>'+'主题推荐产品')).append(
            $('<img/>').attr("src","../images/right_43.png").addClass("cicle1")).append(
            $('<p class="more-sub1"/>').append(
                $('<a href="" class="more-sub1-a">').html('机票')).append(
                $('<a href="" class="more-sub1-a"/>').html('酒店')).append(
                $('<a href="" class="more-sub1-a"/>').html('机加酒')).append(
                $('<a href="" class="more-sub1-a"/>').css("background","none").html('游轮')))).appendTo(freeUl)

}



//----------------------------
//---------------------------主题推荐请求数据---------------------------------
function getThemeWalk(){
    $.get("index/freeWalk.json",function(res){
        //console.log(res);
        createThemeLi(res);// 鼠标滑过   获取主题数据
        createThemeChoose(res,0)//页面加载获取第一页数据
    })
}

//-----------  获取主题推荐的数据 title  -----------------------
var theme_title_ul = $(".zw-theme-freeWalk-ul");
function createThemeLi(data){
    $.each(data,function(m,n){
        theme_title_ul.empty();
        //console.log(n["title"]);
        var theme_title_li =$("<li class='zw-home-freeWalk-li'/>");
        theme_title_li.appendTo($(".zw-theme-freeWalk-ul"));
        theme_title_li.append($("<a href='' class='title-a'/>").html(n["title"]));
        var title_li_a= theme_title_li.find("a");
        //    -----------------调用鼠标滑过事件函数
        //    console.log(title_li_a);
        eventThemeTitleLi(data,theme_title_li);
    });
}
//---主题推荐---------添加鼠标滑过事件----------------------
function eventThemeTitleLi(data,title_li){
    $.each(title_li,function(){
        $(this).mouseenter(function(){
            //console.log(title_li_a)
            var index = $(this).index();
            //console.log(index);//0
            createThemeChoose(data,index);
        })
    })
}

//console.log(freeUl);
//------------------创建元素  主题推荐 接受数据-list  content-----------
function createThemeChoose(data,idx){
    var themefreeUl = $(".zw-theme-freeWalk-wrap-ul");
    var data= data[idx]["data"];
    themefreeUl.empty();
    $.each(data,function(m,n){
        var freeLi = $("<li class='zw-theme-freeWalk-wrap-li'/>");
        freeLi.appendTo(themefreeUl);
        freeLi.append($("<img class='zw-home-freeWalk-wrap-img' />").attr("src", n["imgUrl"]));
        freeLi.append($("<div class='wrap_div'/>")
            .append($("<p class='wrap-ticket-p'/>").html("机票")
                .append($("<p class='wrap-money-p'/>").append($("<em class='p-em'/>").html(n["price"])).append($('<span/>').html("元起")))
                .append($("<h3 class='wrap-title-h3'/>").html(n["title"]))
            ));
        $(".zw-theme-freeWalk-wrap-li:first").find('div').append($("<p class='warp-time-p'/>").html(n["time"]).css("color","#fff"));
    });
    $(".zw-theme-freeWalk-wrap-li:first").css({"width":"570px", "overflow": "hidden"});
    $(".zw-theme-freeWalk-wrap-li:first").find("div").css({"width":"570px",color:"#fff", background:"rgba(0, 0, 0, 0.8)" });
    $(".zw-theme-freeWalk-wrap-li:first").find("h3").css({"width":"570px","color":"#fff"});

    $('<li/>').addClass("freewalk-more ").css("background-image","linear-gradient(#b274c7,#4d8ddb)").append(
        $('<a href=""/>').append(
            $('<p class="more-title"/>').html('查看更多'+'<br/>'+'主题推荐产品')).append(
            $('<img/>').attr("src","../images/right_43.png").addClass("cicle1")).append(
            $('<p class="more-sub1"/>').append(
                $('<a href="" class="more-sub1-a">').html('机票')).append(
                $('<a href="" class="more-sub1-a"/>').html('酒店')).append(
                $('<a href="" class="more-sub1-a"/>').html('机加酒')).append(
                $('<a href="" class="more-sub1-a"/>').css("background","none").html('游轮')))).appendTo(themefreeUl)

}








